<template>
  <div>
    <table-title></table-title>
    <h1>{{myname}}</h1>
    <h1 v-for="item in state.list" :key="item">{{item}}</h1>
    <h1>数字：{{state.count}}</h1>
    <h1>计算属性：{{state.countFive}}</h1>
    <button @click="state.toAdd">加1</button>
  </div>
</template>

<script >
  import {ref,reactive,computed} from 'vue'
  // setup  ref reactive  computed
   export default {
      setup(props){
          let myname=ref('张三')
          // reactive  一个函数 定义一个复杂类型的 响应式数据
         // reactive 一次可以创建多个响应式数据 传入一个普通对象
        //  返回响应式数据对象
         let state=reactive({
            count:0,
            list:["伍佰","凤凰传奇","刘德华"],
            flag:true,
            obj:{
              color:"红色"
            },
            toAdd:()=>{ //事件函数 写到了reactive里面
              state.count++
            },
            // vue3计算属性 写道了reactive内部
            countFive:computed(()=>state.count*5)
         })

       

          return {
              myname,
              state
          }
      }
   }
</script>
